<template>
	<view class="wrap bggrey">
		<view class="padding">
			<view class="cz-box auto auto-height" style="padding-bottom: 0.8rem;">
				<view class="inner">
					<view class="tit">
						充值金额
					</view>
					<view class="money-input" style="width:100%">
						<text class="unit">￥</text>
						<input type="text" @input="z_cz_us_js" @propertychange="z_cz_us_jss" v-model="amount"
							autocomplete="off" style="width:100%; padding-left: 9px;">
					</view>

					<view id="c_czusdt" style="display:none">
						<view class="money-number c_fc" style="margin-bottom: 0.2rem; display: none;"
							id="cz_czusdt_shisuan">
							<text class="money-tips" @click="showCzUsdtConfirm">!</text>
							充值试算：<span style="font-weight:600;color:#f40" id="c_czusdt_czje">0</span> USDT 预计到账：<span
								style="font-weight:600;color:#f40" id="c_czusdt_rmb">0</span>元
						</view>

						<view class="money-number fc" style="margin-bottom: 0.2rem;">
							<text class="money-tips" @click="showCzUsdtConfirm">!</text>
							充值汇率：<span style="font-weight:600;color:#f40" id="c_czusdt_huili">1USDT ≈ 0.0000元</span>
						</view>

					</view>

					<view style="display: flex;">
						<view class="money-number fc" style="margin-bottom: 1rem;">
							<text class="money-tips" @click="showConfirm">?</text>可提余额 264.00 元
						</view>
						<view class="money-number fc" style="margin-left: 10px;margin-bottom: 1rem;">
							可用余额 297.00 元
						</view>
					</view>

					<view class="h30">

					</view>
				</view>
				<view class="fcc">
					<view class="btn-blue fcc w100" @click="recharge">
						<span>立即充值</span>
					</view>
				</view>
			</view>
		</view>
		<view class="padding">
			<view class="h3">
				选择支付方式
			</view>

			<view class="pay-style-selects">

				<view class="pay-select-item c_xzczfs checked" data-xz="1" data-id="0" data-pid="22" name="c_czfs">
					<view class="img" style="width: 1.5rem;height: 1.5rem;">
						<image style="width: 100%;height: 100%;"
							src="@/static/img/my/16265a54886e8165cacba81c01e149cd.png" mode="widthFix">
					</view>
					<view class="name">
						银行卡转账
					</view>
					<view class="red">
					</view>
					<view class="radio fc">
						<u-radio-group v-model="value">
							<u-radio shape="circle"></u-radio>
						</u-radio-group>
					</view>
				</view>

			</view>
		</view>

		<view style="padding: 10px;">
			<p><strong>如何充值？</strong></p>
			<p><strong>联系客服充值：</strong></p>
			<p><strong>登录&#8203;``【oaicite:5】``&#8203;平台账户</strong></p>
			<p><strong>1：充值时间 早上09:00晚上22:00</strong></p>
			<p><strong>2：点击&#8203;``【oaicite:4】``&#8203;选择&#8203;``【oaicite:3】``&#8203;</strong></p>
			<p><strong>3：充值前请联系平台客服获取平台充值账号<br></strong></p>
			<p><strong>4：使用手机网上银行或USDT转账至平台充值账号</strong></p>
			<p><strong>5：充值USDT奖励充值金额的3%</strong></p>
			<p><strong>6：在&#8203;``【oaicite:2】``&#8203;点击充值，输入转账成功的金额，依次填写转账人名字、转账凭证，</strong></p>
			<p><strong>点击提交订单完成充值。转账成功几分钟内即可到账，点击&#8203;``【oaicite:1】``&#8203;刷新&#8203;``【oaicite:0】``&#8203;，</strong>
			</p>
			<p><strong>如充值10分钟未到账请联系在线客服处理。</strong></p>
			<p><br></p>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				amount: null,
				value:null
			}
		},
		methods: {
			showToast() {
				const params = {
					type: 'loading',
					title: '正在加载',
					message: "正在加载",
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/loading.png'
				}
				this.$refs.uToast.show({
					...params,
					complete() {
						params.url && uni.navigateTo({
							url: params.url
						})
					}
				})
			},
			goBack() {
				uni.navigateBack();
			},
			recharge() {
				this.$refs.uToast.show({
					type: 'loading',
					title: '正在加载',
					message: "正在加载",
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/loading.png'

				})
				setTimeout(() => {
					if (this.amount === null) {
						this.$refs.uToast.show({
							type: 'warning',
							message: "请输入大于零的金额",
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/top.png'
					
						})
					} else {
						this.getPay()
					}
				},1000)
				

			},
			getPay() {

				const getUserInfo = this.$store.getters['getUserInfo']
				// 处理充值逻辑
				const param = {
					amount: this.amount,
					userid: getUserInfo.userId
				}
				this.$request.post('/recharge/initiate', JSON.stringify(param)).then(res => {
						console.log(res);
						if (res.code = 200) {
							// this.userInfo=res.data.user
							// this.$store.dispatch('setUserInfo',this.userInfo)
							this.$refs.uToast.show({
								type: 'success',
								title: '成功主题(带图标)',
								message: res.message,
								iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
							}, )

						}
					}

				).catch(error => {
					// 处理请求失败的情况
					this.$refs.uToast.show({
						type: 'error',
						icon: false,
						title: '失败主题',
						message: "服务器异常",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
					}, )
					console.error('GET request failed:', error);
				});
			},
			showCzUsdtConfirm() {
				// 显示充值确认对话框
				uni.showModal({
					title: '充值确认',
					content: '确认充值吗？',
					success: (res) => {
						if (res.confirm) {
							// 用户点击确定
							// 处理确认充值逻辑
						} else if (res.cancel) {
							// 用户点击取消
						}
					},
				});
			},
			showConfirm() {
				// 显示提示对话框
				uni.showModal({
					title: '提示',
					content: '这里是提示内容',
					showCancel: false,
				});
			},
			z_cz_us_js(event) {
				// 处理充值金额输入逻辑
			},
			z_cz_us_jss(event) {
				// 处理充值金额输入逻辑
			},
		},
	};
</script>

<style scoped>
	/* 样式写在这里 */
	.c_xzczfs {
		justify-content: center;
		align-items: center;
	}
</style>